<template>
	<view class="content">
		<view class="" v-if="comments.length==0">该商品暂无评论哦~</view>
		<view class="" v-if="comments.length!=0">
			<view class="part" v-for="(item,index) in comments" :key="index">
				<image src="../../static/img/num1.jpeg" mode=""></image>
				<text class="name">{{item.nickname}}</text>
				<view class="body" @click="Godetails(item)">
					{{item.commentms==null? '暂无文字描述~' : item.commentms}}
					<text
						style="color: #0566ba;font-size: 26rpx;">@{{item.xhmc}}-{{item.xhzl}}-{{item.xhzt}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				comments: []
			}
		},
		onLoad(option) {
			var th = this
			th.bh = option.bh
		},
		onShow() {
			var bs = uni.getStorageSync('UserInformation')
			this.token = bs.usertoken 
			this.getComment()
		},
		methods: {
			Godetails(item) { 
				uni.navigateTo({
					url: '/pages-share/CommentDetals/CommentDetals?item=' + JSON.stringify(item)
				})
			},
			getComment() {
				var th = this
				th.requestfs({
					url: '/mall/comment/selectCommentList?bh=' + th.bh,
					Authorization: th.token,
				}).then(res => {
					if (res.data.code == 200) {
						th.comments = res.data.data
					} else {
						uni.showToast({
							title: "数据请求失败",
							icon: "none",
							duration: 2000
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		width: 94%;
		margin:0 auto;
		border-radius: 4rpx;
		padding-bottom: 15rpx;

		.part {
			margin: 20rpx;

			.body {
				margin-top: 6rpx;
				font-size: 26rpx;
				color: #212121;
				overflow: hidden; //超出部分隐藏
				text-overflow: ellipsis; //文字隐藏部分显示省略号
				display: -webkit-box; //改变盒子模型
				-webkit-line-clamp: 3; //文字显示几行
				-webkit-box-orient: vertical;
			}

			.name {
				font-weight: bold;
				margin-left: 15rpx;
			}

			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				vertical-align: middle;
			}
		}

		.line {
			width: 100%;
			height: 1px;
			background-color: #f2f2f2;
		}

		.title {
			margin: 0 20rpx;
			line-height: 100rpx;
			font-weight: bold;

			.right {
				float: right;
			}
		}
	}
</style>
